/*
 * @Description: webpack配置
 * @Date: 2021-07-19 10:26:18
 * @LastEditTime: 2021-10-08 20:31:24
 * @FilePath: \vue-h5\vue.config.js
 */
const path = require('path')
const chalk = require('chalk')
const CompressionPlugin = require('compression-webpack-plugin')
const currentEnv = process.env.NODE_ENV
const currentAppUrl = process.env.VUE_APP_URL
const currentAppEnv = process.env.VUE_APP_ENV
const isProd = process.env.NODE_ENV === 'production'

function resolve (dir) {
  return path.join(__dirname, dir)
}

console.log(`${chalk.yellow.bold('the NODE_ENV is: ' + `${currentEnv}`)}`)
console.log(`${chalk.yellow.bold('the VUE_APP_ENV is: ' + `${currentAppEnv}`)}`)
console.log(`${chalk.yellow.bold('the VUE_APP_URL is: ' + `${currentAppUrl}`)}`)

module.exports = {
  // publicPath: isProd ? './' : '/',
  // assetsDir: process.env.outputDir,
  runtimeCompiler: true,  // 是否使用包含运行时编译器的Vue核心的构建
  lintOnSave: true, // 是否开启eslint保存检测
  productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
  css: {
    extract: isProd ? {
      ignoreOrder: true
    } : false // 禁用css打包顺序检查
  },
  // 如果你需要基于环境有条件地配置行为, 通过这个，你可以直接修改配置，会通过webpack-merge 合并到最终的配置中
  configureWebpack: {
    // 通过cdn引入的资源，配置externals可全局引入, 比如举例jQuery吧
    externals: {
      jquery: 'jQuery'
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'] // 省略后缀名
    },
    // filenameHashing:false, // 打包的时候不使用hash值
    // 输出重构, 设置打包编译后的js文件名称, 我们还可以添加时间戳防止缓存${ timeStamp }
    // output: { 
    //   filename: `js/[name].[hash].js`,
    //   chunkFilename: `js/[id].[chunkhash].js`,
    // }
  },
  chainWebpack: config => {
    config.resolve.alias.set('@', resolve('src'))
    config.optimization.minimizer('terser').tap((args) => {
      // 去除生产环境console
      args[0].terserOptions.compress.drop_console = true
      return args
    })
    // 打包生产.gz压缩包
    config.plugin('compressionPlugin').use(
      new CompressionPlugin({
        test: /\.(js|css)$/,
        threshold: 10240,
        deleteOriginalAssets: false // 不删除源文件
      })
    )
    // 图片base64转换设置
    // config.module.rule('images')
    // .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).use('url-loader')
    // .loader('file-loader')
    // .options({
    //   name: '[name].[hash:8].[ext]',
    //   limit: 2048    // 图片小于2k才转为base64
    // }).end()
    // 配置后，当npm run build-test/serve-test的时候也能正常打包了,跟上面configureWebpack中配置的一样
    // config.output.filename('js/[name].[hash].js').chunkFilename('js/[id].[chunkhash].js').end()
  },
  devServer: {
    host: '0.0.0.0',
    port: '8086',
    hot: true,
    open: false,
    overlay: {
      warnings: true,
      errors: true
    } // 错误、警告在页面弹出
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/css/common.less'),
        path.resolve(__dirname, './src/assets/css/base.less')
      ]
    }
  }
};
